import React, { useEffect, useState } from "react";
import Header from "../../components/Header";
import { LeftOutline,SendOutline,StarOutline} from "antd-mobile-icons";
import { useParams, useLocation } from "react-router-dom";
import request from "../../utils/request";
import {ShareSheet} from 'react-vant'
import { Button } from "antd-mobile";
function Detail() {
  const v=useLocation().state
  console.log(v)
  //获取参数id
  const params = useParams();
  const id = params.id;
  //控制分享弹框的显示
  const [showDialog,setShowDialog]=useState(false)
  const close = () => setShowDialog(false);
  //存储详情页数据
  const [detailData, setDetailData] = useState([]);
  
  const [collecting,setCollect]=useState(
     JSON.parse(localStorage.getItem('collecting'))||[]
  )
   
 const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];

  const getDetail = async () => {
    const res = await request.get("/actor/detail/" + id);
    setDetailData(res.data.data);
  };
  useEffect(() => {
    getDetail();

    
  }, []);

  console.log(collecting)

  //收藏功能
  const switchState=()=>{
     setCollect(!collecting)
    if(collecting.some(item=>item.id===v.id)){
       setCollect(collecting.filter(item=>item.id!==v.id))
       localStorage.setItem('collecting',JSON.stringify(collecting.filter(item=>item.id!==v.id)))
    }else{
       setCollect([...collecting,v])
       localStorage.setItem('collecting',JSON.stringify([...collecting,v]))
    }
  }

  return (
    <div>
      {/* 头部组件 */}
      <Header left={<LeftOutline />} title="" right={<span onClick={()=>setShowDialog(true)}><SendOutline /></span>}></Header>

      {/* 详情页数据 */}

      <div className="list">
        {detailData.map((v) => {
          return (
            <dl key={v.id} style={{ display: "flex" }}>
              <dt>
                <img src={v.coverImageUrl} alt="" />
              </dt>
              <dd style={{ marginLeft: "20px" }}>
                <h3>{v.name}</h3>
                <p style={{ marginTop: "10px" }}>{v.category}</p>
                <p style={{ marginTop: "10px" }}>{v.location}</p>
                <p style={{ marginTop: "10px" }}>￥{v.price}</p>
                <p>
                  {v.startTime}-{v.endTime}
                </p>
              </dd>
            </dl>
          );
        })}
      </div>
       
       <div style={{ marginTop: "20px" }}>
            {detailData.map((v) => {
            return (
             <div key={v.id}>
              <p>{v.name}</p>
               <p>{v.location}</p>
              </div>
            )
            
          })}
       </div>


      <div style={{ marginTop: "20px" }}>
        <h1>演出简介</h1>
        <div>
          {detailData.map((v) => {
            return <p key={v.id}>{v.detail}</p>;
          })}
        </div>

       {/* 分享弹框 */}
        
      <ShareSheet
        visible={showDialog}
        options={options}
        title="立即分享给好友"
        onCancel={close}
        onSelect={(option, index) => {
          console.log('option', option);
          console.log('index', index);
          close();
        }}
      />

       <div className="bottom">
           <span><StarOutline fontSize={48} 
            color={collecting.some(item=>item.id===v.id)?'red':'black'}
           onClick={()=>switchState()}/></span>
           <Button color="primary" >购买</Button>
       </div>

      </div>
    </div>
  );
}

export default Detail;
